<template>
	<view class="repairFitting">
		<view :class="['repairFitting-select', proof ? 'repairFitting-proof' : '']" @click="clickSelect"
			@touchmove.stop.prevent>
			<view class="repairFitting-innerText" :style="selectedText ? 'color:#333' : ''">
				{{ selectedText || '请选择部件' }}
			</view>
			<view class="repairFitting-icon" :style="false ? 'rotate:180deg' : '0deg'">
				<image src="@/static/images/repairFitting/bottom.png" class="image"></image>
			</view>
		</view>
		<view v-if="proof" style="color: #e02020;font-size: 24rpx;">请选择部件</view>
	</view>
</template>

<script>
export default {
	components: {},
	props: {
		reset: { type: String, default: '0' },
		disabled: {
			type: Boolean,
			default: false
		},
		partsId: {
			type: String,
			default: ''
		},
		partsName: {
			type: String,
			default: ''
		},
		proof: {
			type: Boolean,
			default: false
		},
		disabledArr: {
			type: Array
		},
		elevatorId: {
			type: String,
			default: ''
		}
	},
	watch: {
		reset(e) {
			if (e == '1') {
				this.leftIndex = -1;
				this.midIndex = -1;
				this.rightIndex = -1;
				this.leftSelect = false;
				this.midSelected = false;
			}
		}
	},

	data() {
		return {
			selectedText: '',
			leftIndex: -1,
			midIndex: 0,
			rightIndex: 0,
			leftSelect: true,
			midSelected: true,
			click: false,
			data: [],
			customInput: '',
			names: '',
			other: '',
			ids: [],
			flag: {},
		};
	},
	mounted() {
		// #ifdef H5
		setTimeout(() => {
			uni.$on('part-selectd', (res) => {
				this.partsSubmit(res);
			});
		}, 1000);
		// #endif

		// #ifndef H5
		uni.$on('part-selectd', (res) => {
			this.partsSubmit(res);
		});
		// #endif
	},
	beforeDestroy() {
		uni.$off('part-selectd');
	},
	methods: {
		// 回显配件名称
		showPartName(row) {
			this.ids = row.partsIds.split(',');
			this.selectedText = row.partsName;
			if (row.partsName && row.floorStandNames) {
				this.selectedText = row.partsName + `(${row.floorStandNames.replaceAll(',','>')})`;
			}
			this.names = row.partsName.split('>');
		},

		// 电梯配件数量
		changeNumber() {
		},

		// 配件选择确定
		partsSubmit(res) {
			let names = res.names;
			let ids = res.ids;
			this.selectedText = [...res.names].join('>');
			if (res.flag && res.flag.id) {
				this.flag = res.flag;
				this.selectedText = [...res.names].join('>') + `(${[...res.flag.names].join('>')})`;
			}
			this.ids = ids;
			this.names = names;
			this.other = res.other;
			// this.$forceUpdate();
			this.changeLastColum();
		},
		clickSelect() {
			uni.navigateTo({
				url: '/pages/pubilc/partSelect?disabledArr=' + JSON.stringify(this.disabledArr) + '&elevatorId=' + this.elevatorId,
				fail: (fail) => {
				},
			});
		},

		close() {
			this.click = false;
		},
		sendCustomInput() {
			this.$emit('repairFit', this.selectedText, this.customInput);
		},
		isNull(val) {
			// 判断三层是否已选择数据，用于回显选择的数据
			if (val.id == '') {
				return false;
			} else {
				return true;
			}
		},
		nameTag(val, num) {
			// 判断名字是否长于?位
			return val.length > num ? val.substring(0, num) + '...' : val;
		},

		// 完成编辑
		changeLastColum(val) {
			this.$emit('repairFit', { ids: this.ids, names: this.names, text: this.selectedText, other: this.other, flag: this.flag });
		}
	}
};
</script>

<style lang="scss" scoped>
@mixin scollerView {
	overflow-y: auto;
	// height: 500rpx;
	overflow-x: hidden;
}

.part-add {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 300;
	width: 750rpx;

	.mark {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		height: 100vh;
		z-index: -1;
	}
}

@mixin input {
	// width: 665rpx;;
	// height: 80rpx;
	// border: 2rpx solid #e9e9e9;
	// border-radius: 4rpx;
	// position: relative;
	// margin: 0 auto;
	width: 670rpx;
	height: 80rpx;
	border: 2rpx solid #e9e9e9;
	border-radius: 4rpx;
	box-sizing: border-box;
	position: relative;
	padding: 20rpx 28rpx;
	box-sizing: border-box;
}

.repairFitting {
	width: 100%;
	height: fit-content;
	margin: 0 0 28rpx 0;

	&-proof {
		border-color: #E02020 !important;
	}

	&-select {
		@include input margin: 28rpx 0 0 0;
		height: 100%;

		&-body {
			width: 670rpx;
			height: fit-content;
			// background-color: #2C405A;
			margin: auto;
			transition: 0.5s all;
			display: flex;
			border: 2rpx solid #e9e9e9;
			border-radius: 4rpx;
			z-index: 300;
			position: absolute;
			background-color: #ffffff;
		}

		&-left {
			@include scollerView width: 166rpx;
			height: 450rpx;
			background-color: #f2f2f2;
		}

		&-mid {
			@include scollerView height: 450rpx;
			width: 166rpx;
			background-color: #f8f8f8;
		}

		&-midcolumn {
			width: fit-content;
			height: fit-content;
		}

		&-right {
			position: relative;
			@include scollerView height: 450rpx;
			width: 338rpx;
			background-color: #ffffff;
			// border: 2rpx solid #e9e9e9;
		}
	}

	&-icon {
		width: 32rpx;
		height: 32rpx;
		/* margin: 0 16rpx; */
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		// transition: all 0.5s;
	}

	&-innerText {
		// position: absolute;
		font-size: 28rpx;
		font-family: PingFangSC, PingFangSC-Regular;
		font-weight: 400;
		text-align: left;
		align-items: center;
		color: #cccccc;
		line-height: 40rpx;
		// top: 20rpx;
		// left: 28rpx;
		width: 80%;
	}

	&-input {
		@include input margin: 20rpx auto 0 auto;
	}
}

@mixin text {
	margin: 0;
	// width: 56rpx;
	height: fit-content;
	font-size: 28rpx;
	font-family: PingFangSC, PingFangSC-Regular;
	font-weight: 400;
	text-align: left;
	line-height: 40rpx;
	padding: 16rpx 28rpx;
	// text-align: center;
}

.options {
	@include text;
	width: 110rpx;
	color: #333333;

	&-selected {
		@include text;
		width: 110rpx;
		color: #0091ff;
	}

	&-custom {
		@include text;
		color: #63c000;
		display: flex;
		align-items: center;
		width: 285rpx;
		// position: absolute;
		// bottom: 36rpx;
		// left: 56rpx;
	}

	&-right {
		@include text;
	}

	&-active {
		@include text;
		width: 110rpx;
		color: #0091ff;
		display: flex;
		align-items: center;
	}
}

.image {
	width: 28rpx;
	height: 28rpx;
}
</style>
